// webpack 插件
const { merge } = require('webpack-merge')
// webpack 公共配置
const common = require('./webpack.common')

// 合并公共配置和开发环境配置
module.exports = merge(common, {
  mode: 'development',
  // 精确到行生成 source map
  devtool: 'eval-cheap-module-source-map',
  output: {
    publicPath: '/' // 静态资源的公共路径需要设定为当前项目根路径
  },
  devServer: {
    static: {
      directory: common.output.path // 静态文件目录
    },
    port: 3000, // 端口号
    historyApiFallback: true, // 支持单页应用 history 路由 fallback
    open: false, // 禁止自动打开浏览器
    hot: true, // 开启热模块重载功能 hmr
    compress: true, // 开启 gzip 压缩
    client: {
      overlay: true, // 在浏览器端显示编译错误
      progress: false // 在浏览器端打印编译进度
    }
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        // loader 的执行顺序是从下到上，从右到左
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // css 中通过 @import 引入的文件，也要先执行 sass-loader + postcss-loader
              importLoaders: 2
            }
          },
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }
})
